<template>
  <section class="todoapp">
    <!-- 除了驼峰, 还可以使用-转换链接 -->
    <TodoHeader @addNew="add"></TodoHeader>
    <TodoMain :arr="list"></TodoMain>
    <TodoFooter></TodoFooter>
  </section>
</template>

<script>
// 1.0 样式引入
import './styles/base.css'
import './styles/index.css'

import TodoHeader from './components/TodoHeader'
import TodoMain from './components/TodoMain'
import TodoFooter from './components/TodoFooter'
import axios from 'axios'
axios.defaults.baseURL = ' http://liufusong.top:3001'
export default {
  components: {
    TodoHeader,
    TodoMain,
    TodoFooter
  },
  data () {
    return {
      list: []
    }
  },
  methods: {
    getAll () {
      axios({
      // method: 'GET', // get post
        url: '/list'
      }).then(res => {
        this.list = res.data // 后台返回的结果
        console.log(this.list)
      }).catch(err => {
        console.log(err) // 后台报错返回
      })
    },
    add (e) {
      console.log(e)
      axios({
        url: '/add',
        method: 'POST',
        data: e
      }).then(res => {
        this.getAll()
        e.title = ''
      })
    },
    mod () {
      axios({
        // url:'/list/'+
      })
    },
    del () {
      axios({
        url: '/list/'
      })
    }
  },
  created () {
    // console.log(this.arr)
    this.getAll()
  }
}
</script>
